﻿@model Article
@{
    Layout = "~/Views/Shared/LS/_Layout.cshtml";

    var tags = ConvertHelper.StringToStringArray(ConvertHelper.ToString(Model.ExtField01).Replace("，", ","));

    var sql = StringHelper.FormatSql("SELECT top 3 *  FROM [cms].[Article] where id!='{0}' and  catalogIds like '%{1}%'", Model.Id, Model.CatalogId);

    for (int i = 0; i < tags.Length; i++)
    {
        if (i == 0)
        {
            sql += StringHelper.FormatSql(" and (ExtField01 like '%{0}%'", tags[i]);
        }

        if (i != 0)
        {
            sql += StringHelper.FormatSql(" or ExtField01 like '%{0}%'", tags[i]);
        }


        if (i == tags.Length - 1)
        {
            sql += ")";
        }
    }

    sql += " order by id desc";

    var hotArticles = IoCHeler.Resolve<IArticleAppService>().Query(sql).ToList();
    ViewBag.ShareTitle = Model.Title;
    ViewBag.ShareContent = Model.Summary;
}

@section Head{

    <meta name="description" content="@Model.Summary" />
    <meta name="referrer" content="never" />
    <script src="https://unpkg.com/video.js/dist/video.min.js"></script>

}

<div class="content_detail clearfix">

    <div class="content_detail_left" style="max-width: ">
        <div class="title">@Model.Title</div>
        <div class="part2">
              @if (Request["page"] == "qph"){
                 <a href="/?page=qph&tthId=@Model.TTHId" target="_blank" class="iconfont icon-user"> @Model.Author</a>
              }else{
                 <a href="#" target="_blank" class="iconfont icon-user"> @Model.Author</a>
              }

            <span class="icon-yuanchuangtag iconfont"> 原创</span>
            <span class="icon-time iconfont"> @Model.PublishTime.GetValueOrDefault().ToString("MM/dd")</span>
            <span class="icon-view iconfont"><span> @Model.ViewCount</span></span>
        </div>

        @if (Request["page"] != "sp" && Request["page"] != "live")
        {
            <div class="y_text2" style="text-align:justify; ">
                @Html.Raw(Model.Text)
            </div>
        }

        @if (Request["page"] == "sp")
        {
            <video muted
                   controls
                   style="width: 100%;"
                   autoplay>
                <source src="@Model.Video" type="video/mp4">;
            </video>
        }

        @if (Request["page"] == "live")
        {
            if (Model.LiveStatus == 0)
            {
                <div class="bg-mask">
                    <img src="@Model.TitleImageUrl" alt="">
                    <div class="hint-wrap">
                        <div>离直播开始还有</div>
                        <div class="hint-time" style="font-size: 26px">12天18小时56分</div>
                    </div>

                    <div class="download-wrap">
                        请前往APP观看直播 <a target="view_window" style="color: #C51429" href="https://www.greatauto.cn/app/">前往下载</a>
                    </div>
                </div>
            }
            else if (Model.LiveStatus == 1)
            {
                @* <div class="bg-mask">
                    <img src="@Model.TitleImageUrl" alt="">
                    <div class="hint-wrap">
                        <div class="hint-time" style="font-size: 26px">正在直播中</div>
                    </div>

                    <div class="download-wrap">
                        请前往APP观看直播 <a target="view_window" style="color: #C51429" href="https://www.greatauto.cn/app/">前往下载</a>
                    </div>
                </div> *@

	        <div class="video-wrap video-js"   style="width: 100%;" ></div>
            }
            else
            {
                <video muted
                       controls
                       style="width: 100%;"
                       autoplay>
                    <source src="@Model.LiveRePlayAddr" type="video/mp4">;
                </video>
            }



        }


        @if (Request["page"] == "sp" || Request["page"] == "live")
        {
            <div class="y_text2" style="text-align:justify;margin-top: 20px; ">
                @Html.Raw(Model.Summary)
            </div>
        }


        <div class="comment-post">
            <div class="div-comment" style="display: block;">
                <textarea placeholder="发表评论" id="content"></textarea>
                <br />
                <input type="text" placeholder="您的大名" id="userName" maxlength="20" />
                <br />
                <button class="" id="btn-comment">提交评论</button>
            </div>
        </div>

        <div class="comment-list-wrap">
            <div id="comment-list"></div>
        </div>



    </div>

    <div class="content_detail_right">
        <p>相关资讯</p>
        @foreach (var item in hotArticles)
        {
            <div class="a_img">
                <a href="?key=@item.Key&page=@Request["page"]"><span><img src="@item.TitleImageUrl" data-bd-imgshare-binded="1" /></span></a>
                <div class="title"><a href="?key=@item.Key&page=@Request["page"]">@item.Title</a></div>
            </div>
        }

    </div>
</div>

<div class="adlist_hide" style="display:none">
</div>

 <link href="~/App_Content/2.0/style/live.css" rel="stylesheet" />

<script>

      console.log('Model.Id','@Model.TTHId','@Model.LiveStatus', '@Request["page"]' )
       if('@Model.LiveStatus' == 0 && '@Request["page"]' === 'live'){
            var timeEnum = {
                    "天": 86400000,
                    "小时": 3600000,
                    "分钟": 60000
                }

                var latelyTime =  function (milliseconds,unit = ""){
                        let humanize = "";
                        for (let key of Object.keys(timeEnum)) {
                            // if (milliseconds >= timeEnum[key]) {
                                humanize += Math.floor(milliseconds / timeEnum[key]) + key + unit;

                            // }
                        }
                        return humanize || false;
                }

                var milliseconds = new Date("@Model.LiveStartTime".replace(/-/g,'/')).getTime() -  new Date().getTime()
                var d = parseInt(latelyTime(milliseconds).split('天')[0])
                var h = parseInt(latelyTime(milliseconds).split('天')[1].split('小时')[0])
                var m = parseInt(latelyTime(milliseconds).split('天')[1].split('小时')[1].split('分钟')[0])
                let nh = h - d*24
                let nm = m - h*60

                document.querySelector(".hint-wrap .hint-time").innerText = d+'天'+nh+'小时'+nm+'分'
       }




               if('@Model.LiveStatus' == 1){
		            var video = document.createElement('video')
					video.id = 'video'
					video.style = 'width: 100%;height:100%'
					video.controls = true
					video.setAttribute('x5Playsinline','x5Playsinline')
					video.setAttribute('playsinline','playsinline')
					video.setAttribute('webkitPlaysinline',true)
					video.setAttribute('xWebkitAirplay',true)
					var source = document.createElement('source')

					var LivePlayAddr = '@Model.LivePlayAddr'
					// var LivePlayAddr = 'blob:https://tv.cctv.com/842dd1f7-0e3b-4f22-9e50-1e75275b77b9'
					if(LivePlayAddr.includes('rtmp')){
					  LivePlayAddr = LivePlayAddr.replace('rtmp','https')
                      LivePlayAddr = LivePlayAddr + '.m3u8'
					}
					source.src = LivePlayAddr
					source.type="application/x-mpegURL"
					video.appendChild(source)
                    document.querySelector('.video-js').appendChild(video);
                    videojs('video')
                 }


</script>

<style>
    .bg-mask { position: relative; }

    .bg-mask::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.3); }

    .hint-wrap { position: absolute; top: 40%; left: 0; right: 0; height: 40px; text-align: center; color: #FFFFFF; z-index: 10; }

    .download-wrap { position: absolute; top: 70%; left: 0; right: 0; height: 40px; text-align: center; color: #FFFFFF; z-index: 10; }
</style>

@section Foot{
    <script>


        var queryString = function (name) {
            name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
            var regexS = "[\\?&]" + name + "=([^&#]*)";
            var regex = new RegExp(regexS);
            var results = regex.exec(window.location);
            if (results == null) {
                return "";
            } else {
                return decodeURIComponent(results[1].replace(/\+/g, " "));
            }
        }
        var key = queryString('key');
        var isSubmit = false;
        var Page = {
            getCommentList: function () {
                $.getJSON('/cms/Comments/read', {
                    articleId: '@Model.Id'
                }, function (data) {

                    var list = data.Data || [];
                    var h = '';
                    if (list.length > 0) {
                        $("#comment-list").addClass('comment-top-line')
                        $.each(list, function (i, item) {
                            h += '<div class="comment clearfix" ><div class="comment_right ">';
                            h += '<div><span>' + item.UserName + '</span> <span style="font-size:15px">' + item.CreateTime.slice(0,16) + '</span> </div>';
                            h += '<div>' + item.Content + '</div>';
                            h += '</div></div>';
                        });
                    } else {
                        h += '<div class="tip-null">暂无评论</div>';
                    }
                    $('#comment-list').html(h);
                });
            }
            , initPost: function () {

                $('#btn-comment').click(function () {
                    if (isSubmit) {
                        return false;
                    }
                    var userName = $('#userName').val().trim();
                    var content = $('#content').val().trim();
                    if (userName.length == 0) {
                        alert('输入姓名')
                        return false;
                    }
                    if (content.length == 0) {
                        alert('输入评论内容')
                        return false;
                    }
                    isSubmit = true;
                    $.post('/cms/Comments/createForPC', {
                        articleId: '@Model.Id'
                        , userName: userName
                        , content: content
                    }, function (data) {
                        isSubmit = false;
                        if (data.ErrorCode==0) {
                            alert('评论成功');
                            $('#userName').val('');
                            $('#content').val('');
                        } else {
                            alert(data.message || '评论失败');
                        }
                    });
                })
            }
            , init: function () {
                Page.initPost();
                Page.getCommentList();
            }
        }
        Page.init();

           if($(".article-content").html()){
          var inhtml = $(".article-content").html().replace(/style\s*=(['\"\s]?)[^'\"]*?\1/gi,'');
          $(".article-content").html(inhtml);
           }


    </script>
}
